<!--
 * @Author: 曹哈哈 2273766442@qq.com
 * @Date: 2024-11-01 16:23:56
 * @LastEditors: 曹哈哈 2273766442@qq.com
 * @LastEditTime: 2024-11-01 16:33:32
 * @FilePath: \management-mini-program\src\pages\main\parkingLot\modal\channel\ChannelForm.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <view>
        <tn-popup
            v-model="isPopupVisible"
            width="95%"
            height="500rpx"
            open-direction="bottom"
            @close="close"
            close-btn>
            <view class="tn-m-sm tn-p-sm tn-mt tn-mb">
                <view class="tn-mb-xl">
                    <tn-title
                        size="lg"
                        :title="title+'-音量'"
                        mode="vLine"
                        assist-color="tn-blue" />
                </view>
                <view class="tn-flex justify-around tn-p tn-mb-sm tn-grey_text items-center tn-text-lg">
                    <text> 音量 </text>
                    <tn-bubble-box
                        :options="COUPON_TYPE"
                        position="bottom"
                        @click="confirmBubble(COUPON_TYPE, 'voiceValue', $event)">
                        <tn-input
                            style="pointer-events: none"
                            :model-value="pickerDict.label.voiceValue[formData.voiceValue]"
                            placeholder="请选择音量">
                            <template #suffix>
                                <tn-icon name="sort"></tn-icon>
                            </template>
                        </tn-input>
                    </tn-bubble-box>
                </view>

                <view class="tn-flex justify-around tn-mt"
                    ><tn-button
                        width="40%"
                        size="xl"
                        text-color="tn-white"
                        @click="changeVolume"
                        bg-color="tn-gradient-bg__cool-1"
                        >调整音量</tn-button
                    >
                    <tn-button
                        width="40%"
                        size="xl"
                        text-color="tn-white"
                        bg-color="tn-gradient-bg__cool-8"
                        @click="sendVoice"
                        >发送语音</tn-button
                    >
                </view>
            </view>
        </tn-popup>
    </view>
</template>

<script setup lang="ts">
    import { defineEmits, ref, reactive } from "vue";
    import { COUPON_TYPE, COUPON_UNITS } from "@/utils/dict"; // 引入字典
    import { onLoad } from "@dcloudio/uni-app";
    const pkId = ref(); // 主键id
    const title = ref(""); // 弹框标题

    const isPopupVisible = ref(false);

    const formType = ref(""); // 表单的类型：create - 新增；update - 修改
    const formData = ref({
        id: undefined,
        voiceValue: undefined,
    });
    const formRef = ref(); // 表单 Ref
    /** 打开弹窗 */
    const open = async (name: string, id?: number) => {
        isPopupVisible.value = true;
        title.value = name;

        // 修改时，设置数据
        if (id) {
            // 设置修改主键
            pkId.value = id;
            try {
                // getDeatilById 获取formData 数据
            } catch {}
        }
    };

    const close = () => {
        isPopupVisible.value = false;
    };
    // 调整音量
    const changeVolume = () => {};

    // 发送语音
    const changeVoice = () => {};
    // 字典处理-字典枚举映射
    const pickerDict = ref({
        dict: {
            voiceValue: COUPON_TYPE,
        },
        label: { voiceValue: {} },
    });

    // 字典处理-处理字典数据格式
    const getDictLabel = () => {
        pickerDict.value.label = {};
        for (let key in pickerDict.value.dict) {
            let dict = pickerDict.value.dict[key];
            pickerDict.value.label[key] = dict.reduce((acc, cur) => {
                acc[cur.value] = cur.label;
                return acc;
            }, {});
        }
    };
    // 确认选择器的选择
    const confirmBubble = (dict, labelKey, value) => {
        console.log("confirmBubble=>", labelKey);
        console.log("confirmBubble1=>", dict[value].value);
        formData.value[labelKey] = dict[value].value;
        // closePicker(); // 关闭选择器
    };

    onLoad(() => {
        getDictLabel();
    });

    defineExpose({ open }); // 提供 open 方法，用于打开弹窗
</script>

<style></style>
